<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>
<style type="text/css">
	html{
		perspective: 800px;
	}
	.box1{
		width: 200px;
		height: 200px;
		background-color: #00FFFF;
		margin: 100px auto;
		transition: all 2s;
	}
	.box1:hover{
		/* 通过旋转使元素沿着x,y,z旋转指定的角度 deg角度 turn圈数*/
		/* transform: rotateZ(0.5turn); */
		transform: rotateX(45deg);
		transform: rotateY(180deg);
		/* 是否显示元素背面 */
		backface-visibility: hidden;
	}
</style>